<template>
  <div id="container"
       ref="echartsBar"></div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
  mounted () {
    this.echartsBar();
  },
  methods: {
    echartsBar () {
      var chart = new Highcharts.chart("container", {
        chart: {
          type: "column",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 0,
            beta: 0,
            viewDistance: 20,
            depth: 10
          },
          marginBottom: 50,
          marginRight: 0
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        legend: {
          align: "left", //程度标的目标地位
          verticalAlign: "top", //垂直标的目标地位
          x: -15,
          y: 5,
          itemStyle: {
            color: "#ddd"
          },
          itemHoverStyle: {
            color: "#aaa"
          },
          symbolWidth: 20,
          // backgroundColor:'#f00' ,
          symbolRadius: 0
        },
        xAxis: {
          categories: ["2018", "2019", "2020", "2021"],
          gridLineWidth: 0,
          labels: {
            style: {
              color: "white",
              fontSize: '14px',
            }
          }
        },
        yAxis: {
          // allowDecimals: false,
          // min: 0,
          gridLineWidth: 0,
          labels: {
            enabled: false
          },
          title: {
            enabled: false
          }
        },
        tooltip: {
          headerFormat: "<b>{point.key}</b><br>",
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}万 / {point.stackTotal}万'
        },
        plotOptions: {
          column: {
            stacking: "normal",
            depth: 40,
            dataLabels: { enabled: true }
          }
        },

        series: [
          {
            name: "在建",
            data: [150, 0, 0, 0],
            stack: "male",
            color: "#ccc"
          },
          {
            name: "规划",
            data: [0, 350, 500, 500],
            stack: "male",
            color: "rgb(29,190,29)"
            // color: {
            //   linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            //   stops: [[0, "rgb(109,205,131)"], [1, "#ccc"]]
            // }
          },
          {
            name: "现状",
            data: [5100, 5450, 5950, 6450],
            stack: "male",
            color: {
              linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
              stops: [[0, "rgb(2,101,240)"], [1, "rgb(2,219,232)"]]
            }
          }
        ]
      });
    }
  }
};
</script>